<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--部门-->
<body>
<div th:replace="base/load::load"/>
<div id="table-tool">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="onOpenAddDialog()">新增</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="onOpenEditDialog()">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="onTreeRemove()">删除</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-node-open',plain:true" onclick="onNodeOpen()">展开</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-node-close',plain:true" onclick="onNodeClose()">收起</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true" onclick="onRefresh('tree')">刷新</a>
</div>
<table id="table" class="easyui-treegrid" data-options="url:'tree',method:'get',onLoadSuccess:onTreeLoadSuccess,idField:'id',treeField:'deptName',fit:true,singleSelect:true,rownumbers:true,toolbar:'#table-tool'">
    <thead>
    <tr>
        <th data-options="field:'id',checkbox:true"></th>
        <th data-options="field:'deptName',width:300">部门名称</th>
        <th data-options="field:'showOrder',width:100">显示顺序</th>
        <th data-options="field:'status',width:100">状态</th>
        <th data-options="field:'deptComment',width:200">部门备注</th>
    </tr>
    </thead>
</table>
<!--弹出框-->
<div id="dialog" class="easyui-dialog uq_dialog" data-options="title:'操作',closed:true,buttons:'#dialog-tool'">
    <form id="form" method="post">
        <input id="id" name="id" type="hidden"/>
        <table>
            <tr>
                <td>部门名称</td>
                <td><input name="deptName" class="easyui-textbox" style="width: 200px" data-options="required:true"/></td>
                <td>上级部门</td>
                <td>
                    <select id="p_dept" name="ipid" class="easyui-combotree" style="width: 200px" data-options="onClick:onComboTreeClick,panelHeight:'auto',required:true"/>
                    <input id="ppath" name="ppath" type="hidden"/>
                    <input name="path" type="hidden"/>
                </td>
            </tr>
            <tr>
                <td>显示顺序</td>
                <td><input name="showOrder" class="easyui-numberspinner" style="width: 200px" data-options="min:0,required:true"/></td>
                <td>状态</td>
                <td>
                    <select name="status" class="easyui-combobox" style="width: 200px" data-options="required:true,panelHeight:'auto'">
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td colspan="3"><input name="deptComment" class="easyui-textbox" style="width: 100%" data-options="multiline:true,height:60"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-tool">
    <a id="dialog-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="treeSave()">保存</a>
    <a id="dialog-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog').dialog('close')">关闭</a>
</div>
<script type="text/javascript" th:src="@{/utils/System.js}"></script>
<script type="text/javascript">

    function onTreeRemove() {
        var rows = $("#table").datagrid("getSelections");
        if (rows == null || rows.length == 0) {
            AlertUtil.warning("请选择后，再操作！");
            return;
        }
        if (rows.length != 1) {
            AlertUtil.warning("每次只能操作一条数据！");
            return;
        }
        var row = rows[0];
        var nodes = $("#table").treegrid("getChildren", row.id);
        // 只能删除叶子节点
        if (nodes != null && nodes.length == 0) {
            onRemove("tree");
        } else {
            AlertUtil.info("只能选择叶子节点处理！")
        }
    }

    function onTreeLoadSuccess(row, data) {
        $("#p_dept").combotree("loadData", $("#table").treegrid("getData"));
    }

    function treeSave() {
        this.onSave("treeSave", "tree");
    }

    function onComboTreeClick(node) {
        $("#ppath").val(node.path);
    }

    function onNodeOpen() {
        $("#table").treegrid("expandAll", "")
    }

    function onNodeClose() {
        $("#table").treegrid("collapseAll", "")
    }
</script>
</body>
</html>

